<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
      :http-request="uploads"
    >
      <!-- 缩略图 -->
      <template #default>
        <div v-if="imageUrl" class="hasImg">
          <img :src="imageUrl" class="avatar" />
          <div class="dot">
            <i
              class="el-icon-zoom-in"
              @click.stop="handlePictureCardPreview"
            ></i>
            <i class="el-icon-delete" @click.stop="handleRemove"></i>
          </div>
        </div>
        <!-- 无图：占位图标 -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </template>
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      class="progress"
      v-if="percent !== 0"
      :show-text="false"
      :percentage="percent"
      status="success"
    ></el-progress>
    <!-- 预览图片 -->
    <el-dialog :visible.sync="dialogVisible" width="200px" center>
      <img width="100%" :src="imageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import COS from 'cos-js-sdk-v5'

const cos = new COS({
  SecretId: 'AKIDSr34rPioiU6YpreEj8ORFtOfiaHkzyPb',
  SecretKey: 'EE7VigNnwpRmsiHZaKnzkGWVCckbBUXJ'
})

@Component({ name: 'MyAvatarUpload' })
export default class extends Vue {
  @Prop({ default: '' }) imageUrl!: string

  // public imageUrl = ''
  percent = 0
  dialogVisible = false

  // 移除图片
  @Emit('update:imageUrl')
  handleRemove() {
    this.percent = 0
    return ''
  }

  // 预览大图
  handlePictureCardPreview() {
    this.dialogVisible = true
  }

  // 上传方法
  uploads({ file }: any) {
    if (!file) return
    cos.putObject(
      {
        // 储存桶
        Bucket: 'sagit-1306666585',
        // 地区带好
        Region: 'ap-guangzhou',
        // 文件名
        Key: `/hr-admin/${Date.now()}-${file.name}`,
        // 文件
        Body: file,
        // 上传的模式类型 直接默认 标准模式即可
        StorageClass: 'STANDARD',
        // 进度变化
        onProgress: ({ percent }) => (this.percent = percent * 100)
      },
      // 上传结束后
      (err, data) => {
        console.log(err || data)
        if (data.statusCode === 200) {
          this.$emit('update:imageUrl', `https://${data.Location}`)
        }
      }
    )
    // console.log(file)
  }

  // 上传前 - 格式和大小校验
  beforeAvatarUpload(file: any) {
    if (this.imageUrl !== '') return
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt5M = file.size / 1024 / 1024 < 5

    if (!isJPG) this.$message.error('只允许上传 JPG 或 PNG 格式的图片!')

    if (!isLt5M) this.$message.error('上传图片大小不能超过 2MB!')

    return isJPG && isLt5M
  }
}
</script>

<style lang="scss">
.hasImg {
  position: relative;
  .dot {
    color: white;
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    left: 0;
    top: 0;
    font-size: 30px;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-color: rgba(146, 146, 146, 0.651);
    visibility: hidden;
  }
  &:hover .dot {
    visibility: visible;
    transition: all 0.1s;
    opacity: 1;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.progress {
  width: 178px;
}
</style>
